﻿<xsl:stylesheet version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:import href="jquery.xslt" />

  <!-- CSS -->
  
  <xsl:template match="ui-tabs" mode="css">
    <xsl:call-template name="jquery-ui-css" />
    <xsl:apply-templates mode="css" />
  </xsl:template>

  <!-- main -->

  <xsl:template match="ui-tabs">
    <div id="{@id}">
      <ul>
        <xsl:apply-templates select="ui-tab" mode="tab-header" />
      </ul>
      <xsl:apply-templates select="ui-tab" mode="tab-body" />
    </div>
  </xsl:template>

  <xsl:template match="ui-tab" mode="tab-header">
    <li>
      <a id="{parent::ui-tabs/@id}-{position()}-header" href="#{parent::ui-tabs/@id}-{position()}">
        <xsl:value-of select="@title"/>
      </a>
    </li>
  </xsl:template>
  
  <xsl:template match="ui-tab" mode="tab-body">
    <div id="{parent::ui-tabs/@id}-{position()}">
      <xsl:apply-templates />
    </div>
  </xsl:template>

  <!-- copy html from #ui-tab -->
  <xsl:template match="html">
    <xsl:apply-templates mode="ui-tab-html" />
  </xsl:template>

  <!-- copy html tags from #ui-tab -->
  <xsl:template match="@* | node()" mode="ui-tab-html">
    <xsl:copy>
      <xsl:apply-templates select="@* | node()" mode="ui-tab-html" />
    </xsl:copy>
  </xsl:template>

  <!-- java-script -->

  <xsl:template match="ui-tabs" mode="script">
    <xsl:call-template name="jquery-ui-script" />

    <script type="text/javascript">
      $(function(){ 
        $('#<xsl:value-of select="@id"/>').tabs(); 
      });
    </script>
    
    <xsl:apply-templates mode="script" />
  </xsl:template>
  
</xsl:stylesheet>
